<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>反馈详情 - 见闻间后台管理</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.css">
    <script src="/install/js/vue2.6.11.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/index.js"></script>
    <script src="/install/js/axios.min.js"></script>
    <script>
        function getUrlParam(name) {
            const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
            const r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        }

        axios.interceptors.request.use(
            config => {
                const token = localStorage.getItem('token') || sessionStorage.getItem('token') || getCookie('token');
                if (token) {
                    config.headers['Authorization'] = 'Bearer ' + token;
                }
                return config;
            },
            error => Promise.reject(error)
        );

        function getCookie(name) {
            const value = '; ' + document.cookie;
            const parts = value.split('; ' + name + '=');
            if (parts.length === 2) return parts.pop().split(';').shift();
        }
    </script>
    <style>
        .app-container { padding: 20px; }
        .user-info { line-height: 1.8; }
        .detail-item {
            margin-bottom: 15px;
            padding: 15px;
            background: #f5f7fa;
            border-radius: 4px;
        }
        .detail-label {
            font-weight: bold;
            color: #606266;
            margin-bottom: 8px;
        }
        .scene-tag {
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 12px;
            color: white;
        }
        .status-tag {
            padding: 3px 8px;
            border-radius: 4px;
            font-size: 12px;
            color: white;
        }
    </style>
</head>
<body>
    <div id="app" class="app-container">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>反馈详情</span>
                <el-button 
                    type="primary" 
                    size="small" 
                    style="float: right; margin-top: -5px;"
                    @click="backToList"
                >
                    返回列表
                </el-button>
            </div>

            <div class="detail-item">
                <div class="detail-label">基本信息</div>
                <div class="user-info">
                    <el-row>
                        <el-col :span="4">反馈ID：{{ formData.id || '-' }}</el-col>
                        <el-col :span="4">用户ID：{{ formData.user_id || '-' }}</el-col>
                        <el-col :span="6">IP地址：{{ formData.ip || '-' }}</el-col>
                        <el-col :span="6">User-Agent：{{ formData.ua || '-' }}</el-col>
                        <el-col :span="4">提交时间：{{ formatTime(formData.create_time) }}</el-col>
                    </el-row>
                </div>
            </div>

            <div class="detail-item">
                <div class="detail-label">反馈内容</div>
                <el-row>
                    <el-col :span="6">
                        <div>反馈场景：
                            <span 
                                class="scene-tag"
                                :style="{ backgroundColor: sceneTypeMap[formData.scene]?.bgColor || '#909399' }"
                            >
                                {{ sceneTypeMap[formData.scene]?.label || '-' }}
                            </span>
                        </div>
                    </el-col>
                </el-row>
                <el-divider></el-divider>
                <div style="white-space: pre-wrap; line-height: 1.6;">{{ formData.content || '-' }}</div>
                
                <div v-if="formData.contact" style="margin-top: 15px;">
                    <div class="detail-label">联系方式</div>
                    <el-input v-model="formData.contact" disabled></el-input>
                </div>
            </div>

            <div class="detail-item" v-if="formData.images">
                <div class="detail-label">相关截图</div>
                <el-image 
                    v-for="(img, index) in formData.images.split(',')" 
                    :key="index" 
                    :src="img" 
                    style="width: 150px; height: 150px; margin-right: 10px; margin-bottom: 10px;"
                    :preview-src-list="formData.images.split(',')"
                ></el-image>
            </div>

            <div class="detail-item">
                <div class="detail-label">处理状态</div>
                <el-row>
                    <el-col :span="4">
                        <span 
                            class="status-tag"
                            :style="{ backgroundColor: statusMap[formData.status]?.bgColor || '#909399' }"
                        >
                            {{ statusMap[formData.status]?.label || '-' }}
                        </span>
                    </el-col>
                    <el-col :span="12">更新时间：{{ formatTime(formData.update_time) }}</el-col>
                </el-row>
                
                <div v-if="formData.process_remark" style="margin-top: 15px;">
                    <div class="detail-label">处理备注</div>
                    <el-input 
                        v-model="formData.process_remark" 
                        type="textarea" 
                        :rows="4" 
                        disabled
                    ></el-input>
                </div>
            </div>
        </el-card>
    </div>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    formData: {
                        id: '',
                        user_id: '',
                        scene: '',
                        content: '',
                        images: '',
                        contact: '',
                        ip: '',
                        ua: '',
                        status: '',
                        create_time: '',
                        update_time: '',
                        process_remark: ''
                    },
                    sceneTypeMap: {
                        '0': { label: '功能异常', bgColor: '#f56c6c' },
                        '1': { label: '产品建议', bgColor: '#67c23a' },
                        '2': { label: '违规举报', bgColor: '#e6a23c' }
                    },
                    statusMap: {
                        '0': { label: '待处理', bgColor: '#e6a23c' },
                        '1': { label: '已采纳', bgColor: '#67c23a' },
                        '2': { label: '已忽略', bgColor: '#909399' }
                    }
                };
            },
            created() {
                const urlParams = new URLSearchParams(window.location.search);
                const id = urlParams.get('id');
                if (id) {
                    this.fetchFeedbackDetail(id);
                } else {
                    this.$message.error('未找到反馈ID');
                }
            },
            methods: {
                fetchFeedbackDetail(id) {
                    axios.get(`/science/feedback/detail?id=${id}`)
                        .then(response => {
                            if (response.data.code === 200) {
                                this.formData = response.data.data || {};
                            } else {
                                this.$message.error(response.data.msg || '获取数据失败');
                            }
                        })
                        .catch(error => {
                            console.error('获取详情失败:', error);
                            this.$message.error('获取数据失败');
                        });
                },
                formatTime(timestamp) {
                    if (!timestamp) return '-';
                    const date = new Date(timestamp * 1000);
                    return date.toLocaleString('zh-CN', {
                        year: 'numeric',
                        month: '2-digit',
                        day: '2-digit',
                        hour: '2-digit',
                        minute: '2-digit',
                        second: '2-digit'
                    });
                },
                backToList() {
                    window.location.href = '/science/feedback/index';
                }
            }
        });
    </script>
</body>
</html>